<template>
	<view>
		<!-- 文件列表区域 -->
		<view
			class="p-3 flex align-center border-bottom border-light-secondary"
			hover-class="bg-hover-light"
			@click="$emit('click')"
		>
			<!-- icon -->
			<text class="iconfont" :class="iconClass" style="font-size: 60rpx;"></text>
			<!-- 左侧文件详情 -->
			<view class="flex flex-column px-1" style="line-height: 1.2;max-width: 500rpx;">
				<text class="font-md text-ellipsis">{{ item.name }}</text>
				<text class="font-sm text-muted">{{ item.created_time | formatTime }}</text>
			</view>
			<!-- 右侧 -->
			<view
				v-if="showChecked"
				class="ml-auto flex justify-center align-center"
				style="width:70rpx;height:70rpx"
				@click.stop="chekedBox"
			>
				<!-- 未选中 -->
				<slot>
					<text
						v-if="!item.checked"
						class="rounded-circle border"
						style="width:25rpx;height:25rpx;"
					></text>
					<!-- 选中 -->
					<text
						v-else
						class="iconfont icon-xuanze-yixuan text-primary"
						style="font-size:40rpx;"
					></text>
				</slot>
			</view>
		</view>
		<slot name="bottom"><!-- 底部插槽 --></slot>
	</view>
</template>

<script>
import $T from '@/common/time.js'
const icons = {
	dir: {
		icon: 'icon-file-b-2',
		color: 'text-warning'
	},
	image: {
		icon: 'icon-file-b-6',
		color: 'text-success'
	},
	text: {
		icon: 'icon-file-s-7',
		color: 'text-info'
	},
	video: {
		icon: 'icon-file-b-9',
		color: 'text-primary'
	},
	none: {
		icon: 'icon-file-b-8',
		color: 'text-muted'
	}
}
export default {
	props: {
		item: Object,
		index: [Number, String],
		showChecked: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		iconClass() {
			let item = icons[this.item.type]
			return `${item.icon} ${item.color}`
		}
	},
	methods: {
		chekedBox() {
			this.$emit('select', {
				index: this.index,
				value: !this.item.checked
			})
		}
	},
	filters: {
		formatTime(value) {
			if (typeof value === 'string') {
				return value
			}
			return $T.gettime(value)
		}
	}
}
</script>

<style></style>
